<template>
  <div class="bottom">
    <div class="foot-left">
      <div style="position: relative;">
        <!-- <img
          src="@/assets/index/right.png"
          alt=""
          style="position: absolute; left: 0; height: 100%;"
        /> -->
        <img src="@/assets/newDashboard/业务应用系统.png" alt="" class="foot-bgimg" />
        <!-- <img
          src="@/assets/index/left.png"
          alt=""
          style="position: absolute; right: 0; height: 100%;"
        /> -->
      </div>
      <div class="foot-left-box">
        <!-- <img src="" alt="" /> -->

        <div class="foot-l-b-center">业务应用系统</div>

        <div class="foot-l-b-right">
          <div class="num">{{ bottomList.length }}</div>
          <div class="type">个</div>
        </div>
      </div>
    </div>
    <div class="foot-center">
      <img src="@/assets/newDashboard/箭头.png" alt="" />
    </div>
    <div class="foot-right" id="container">
      <div class="foot-right-li" v-for="(item, index) in bottomList" :key="index">
        <div style="position: relative;">
          <!-- <img
            src="@/assets/index/right.png"
            alt=""
            style="
              position: absolute;
              left: 0;
              width: calc(var(--num) * 12.7px);
              height: 100%;
            "
          /> -->
          <img :src="getImagePath(item.callerRealName)" class="foot-right-liimg" alt="" />
          <!-- <img
            src="@/assets/index/left.png"
            alt=""
            style="
              position: absolute;
              right: 0;
              width: calc(var(--num) * 12.7px);
              height: 100%;
            "
          /> -->
        </div>

        <div class="foot-right-libox">
          <!-- <img src="@/assets/index/业务应用系统-图标02.png" alt="" /> -->
          <div>
            <div class="libox-title" :title="item.callerId">
              {{ item.callerId }}
            </div>
            <div class="libox-count">调用次数 {{ item.callCount }}</div>
          </div>
        </div>
      </div>
    </div>
    <div id="arrowLeft" @click="scrollToLeft" class="arrowL"></div>
    <div id="arrowRight" @click="scrollToRight" class="arrowR"></div>
  </div>
</template>

<script>
import { countApiCallSortUserCallSortcount } from '@/api/index/index.js'
import Cookies from 'js-cookie'

export default {
  name: 'SdssDatagovernanceFrontendIndex',

  data() {
    return {
      bottomList: []
    }
  },

  mounted() {
    let time = setInterval(() => {
      if (Cookies.get('Admin-Token')) {
        countApiCallSortUserCallSortcount().then((res) => {
          if (res.data.code == 200) {
            const obj = { ...JSON.parse(res.data.data.split('---')[2]) }
            console.log(obj)
            this.bottomList = obj.userCallSort
            clearInterval(time)
          }
        })
      }
    }, 1000)
  },

  methods: {
    // scrollToRight() {
    //   const container = document.getElementById('container')
    //   const vwToPixels = (vw) =>
    //     (vw * document.documentElement.clientWidth) / 100
    //   container.scrollLeft =
    //     container.scrollWidth - container.clientWidth - vwToPixels(2.0833)
    // },
    scrollToRight() {
      const container = document.getElementById('container')
      const vwToPixels = (vw) =>
        (vw * document.documentElement.clientWidth) / 100
      container.scrollLeft += vwToPixels(53)
    },
    scrollToLeft() {
      const container = document.getElementById('container')
      container.scrollLeft = 0
    },
    getImagePath(filename) {
      console.log(filename)
      if (
        filename == '泵站' ||
        filename == '明渠' ||
        filename == '水库' ||
        filename == '管道' ||
        filename == '综合告警' ||
        filename == '工程安全模型' ||
        filename == '数据迁移' ||
        filename == '业务应用系统' ||
        filename == '知识平台'
      ) {
        return require(`@/assets/newDashboard/${filename}.png`)
      } else {
        return require(`@/assets/newDashboard/其他.png`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom {
  width: 99%;
  height: 14vh;
  margin-bottom: 1vh;
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 0px 2.5417vw;
  background-color: rgba(2, 54, 68, 0.8);
  position: relative;
}

.foot-left {
  width: 23.7292vw;
  // height: 9.8148vh;
  position: relative;
}

.foot-bgimg {
  width: 100%;
  height: 100%;
}

.foot-left-box {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.foot-left-box img {
  width: 5.2083vw;
  height: 10.4167vh;
}

.foot-l-b-center {
  margin-left: 8.0208vw;
  font-size: 0.9375vw;
  color: #ffffff;
  font-weight: 600;
}

.foot-l-b-right {
  margin-left: 3.5208vw;
  display: flex;
  align-items: baseline;
}

.foot-center {
  margin-left: 0.8333vw;

  img {
    width: 0.8594vw;
    height: 1.0185vh;
  }
}

.foot-right {
  display: flex;
  width: 78vw;
  height: 100%;
  align-items: center;

}

.foot-right::-webkit-scrollbar {
  display: none;
}

.foot-right-li {
  cursor: pointer;
  position: relative;
  margin-left: 0.7292vw;
}

.foot-right-li img {
  width: 16.9vw;
  height: 5.4167vw;
}

.foot-right-libox {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 1.3021vw;
  box-sizing: border-box;
  margin-left: 2.6042vw;
}

.foot-right-libox img {
  width: 3.2083vw;
  height: 5.4167vh;
}

.libox-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
  font-size: 0.8333vw;
  color: #ffffff;
  margin-bottom: 0.4167vw;
  font-weight: 600;
}

.libox-count {
  padding: 0.4167vw 0.5208vw;
  font-size: 0.625vw;
  color: #fff;
  background-color: #00bdbd;
  border-radius: 1.0417vw;
}

#container {
  overflow-x: scroll;
  scroll-behavior: smooth;
}

// .arrow {
//   width: 0;
//   height: 0;
//   border-top: 20px solid transparent;
//   border-bottom: 20px solid transparent;
//   border-left: 30px solid #000;
//   box-shadow: -2px 0 4px rgba(0, 0, 0, 0.3);
// }

// .arrowR {
//   width: 20px;
//   height: 20px;
//   position: relative;
//   &::before,
//   &::after {
//     content: '';
//     position: absolute;
//     top: -50%;
//     width: 1.0417vw;
//     height: 2.0833vw;
//   }
//   &::before {
//     z-index: 99;
//     background-color: rgba(2, 54, 68, 0.8);
//     right: 0px;
//     clip-path: polygon(0 0, 100% 50%, 0 100%);
//   }
//   &::after {
//     background-color: #fff;
//     left: 12px;
//     clip-path: polygon(0 0, 100% 50%, 0 100%);
//   }
// }
// .arrowL {
//   width: 20px;
//   height: 20px;
//   position: relative;
//   &::before,
//   &::after {
//     content: '';
//     position: absolute;
//     top: -50%;
//     width: 1.0417vw;
//     height: 2.0833vw;
//   }
//   &::before {
//     z-index: 99;
//     background-color: rgba(2, 54, 68, 0.8);
//     left: 0px;
//     clip-path: polygon(100% 0, 0 50%, 100% 100%);
//   }
//   &::after {
//     background-color: #fff;
//     right: 12px;
//     clip-path: polygon(100% 0, 0 50%, 100% 100%);
//   }
// }
#arrowRight {
  width: 1.6146vw;
  height: 8.3333vh;
  z-index: 9999;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  cursor: pointer;
  background-image: url('~@/assets/newDashboard/rightArrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 0.5208vw;
  margin-right: 0.5208vw;
}

#arrowLeft {
  width: 1.6146vw;
  height: 8.3333vh;
  z-index: 9999;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  cursor: pointer;
  background-image: url('~@/assets/newDashboard/leftArrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 0.5208vw;
  margin-right: 0.5208vw;
}
</style>
